<template>
  <view class="pages">
    <view class="header">
      <view class="status-and-detail">
        <view class="status-container">
          <view class="status">
            {{ detail.distributionTypeName }}
            <image
              class="icon"
              src="/static/mine/question_mark.png"
              alt="question_mark"
              @click="$refs.helpPopup.open()"
            ></image>
          </view>
        </view>
        <view class="detail">
          <view
            class="title"
            @click="
              () => {
                $uni.navigateTo({
                  url: '/markingCampaign/pages/distribution/detail',
                });
              }
            "
            >提现记录</view
          >
          <view class="button-list">
            <view
              class="button"
              @click="
                () => {
                  $uni.navigateTo({
                    url: '/markingCampaign/pages/recommender/index',
                  });
                }
              "
              >分销海报</view
            >
            <view
              class="button"
              @click="
                () => {
                  $refs.withdrawalPopup.open();
                }
              "
              >佣金提现</view
            >
          </view>
        </view>
      </view>
      <view class="commission-amount">
        <view class="commission-amount-item">
          <view class="name">总佣金</view>
          <view class="amount">￥{{ handleMoney(detail.fee) }}</view>
        </view>
        <view class="commission-amount-item">
          <view class="name">直推{{ detail.directMemberCount }}人</view>
          <view class="amount">￥{{ handleMoney(detail.directFee) }}</view>
        </view>
        <view class="commission-amount-item">
          <view class="name">间推{{ detail.indirectMemberCount }}人</view>
          <view class="amount">￥{{ handleMoney(detail.indirectFee) }}</view>
        </view>
      </view>
    </view>
    <view class="invited-user-type-selector">
      <view
        class="tab-name"
        @click="switchTab(0)"
        :class="{ active: currentTab === 0 }"
        >直推用户</view
      >
      <view
        class="tab-name"
        @click="switchTab(1)"
        :class="{ active: currentTab === 1 }"
        >间推用户</view
      >
    </view>
    <view class="invited-user-list" v-if="invitedUserList.length > 0">
      <view
        class="invited-user-item"
        v-for="item in invitedUserList"
        :key="item.id"
      >
        <text class="username">{{ item.invitedMemberName }}</text>
        <text class="amount"
          >产生佣金{{ handleMoney(item.integralValue) }}元</text
        >
      </view>
    </view>
    <empty v-else-if="!loading" height="calc(100vh - 396rpx)"></empty>
    <withdrawal-popup ref="withdrawalPopup"></withdrawal-popup>
    <help-popup ref="helpPopup"></help-popup>
  </view>
</template>

<script>
import request from "@/utils/request";
import Empty from "@/components/empty.vue";
import WithdrawalPopup from "@/markingCampaign/pages/distribution/components/withdrawalPopup.vue";
import HelpPopup from "@/markingCampaign/pages/distribution/components/helpPopup.vue";
import { handleMoney } from "../../../utils";

export default {
  components: { HelpPopup, WithdrawalPopup, Empty },
  data() {
    return {
      detail: {},
      invitedUserList: [],
      currentTab: 0, // 0: 直推用户 1: 间推用户
      loading: false,
    };
  },
  onShow() {
    this.getDistributionData();
    this.getInvitedUserList();
  },
  methods: {
    handleMoney,
    //查分销数据
    getDistributionData() {
      return new Promise((resolve, reject) => {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        request({
          url: "/integral/statics",
          method: "post",
        })
          .then((res) => {
            uni.hideLoading();
            this.detail = res;
            resolve(res);
          })
          .catch((err) => {
            uni.hideLoading();
            console.log(err, "err");
            uni.showToast({
              title: err,
              icon: "none",
            });
            reject(err);
          });
      });
    },
    //获取邀请用户列表
    getInvitedUserList() {
      return new Promise((resolve, reject) => {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        this.loading = true;
        //true:直推 false:间推
        let direct;
        switch (this.currentTab) {
          case 0:
            direct = true;
            break;
          case 1:
            direct = false;
            break;
        }
        request({
          url: "/integral/inviteUserPage",
          method: "post",
          data: {
            size: -1,
            current: 1,
            direct,
          },
        })
          .then((res) => {
            uni.hideLoading();
            this.invitedUserList = res.records;
            resolve(res.records);
          })
          .catch((err) => {
            uni.hideLoading();
            console.log(err, "err");
            uni.showToast({
              title: err,
              icon: "none",
            });
            reject(err);
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    switchTab(value) {
      this.currentTab = value;
      this.getInvitedUserList();
    },
  },
  //下拉刷新
  async onPullDownRefresh() {
    try {
      await this.getDistributionData();
      await this.getInvitedUserList();
    } finally {
      uni.stopPullDownRefresh();
    }
  },
};
</script>

<style lang="scss" scoped>
.header {
  padding: 32rpx 28rpx;
  background: url("/static/mine/distribution-bg.webp") no-repeat;
  background-size: 100% 100%;
  .status-and-detail {
    display: flex;
    justify-content: space-between;
    > .status-container {
      .status {
        font-size: 40rpx;
        font-weight: 600;
        color: #333333;
        display: flex;
        align-items: center;
        .icon {
          width: 40rpx;
          height: 40rpx;
          margin-left: 14rpx;
        }
      }
    }
    > .detail {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .title {
        font-size: 30rpx;
        color: #666666;
      }
      .button-list {
        display: flex;
        margin-top: 30rpx;
        .button {
          width: 150rpx;
          height: 60rpx;
          border-radius: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 28rpx;
          background-color: #1b9b69;
          margin-left: 20rpx;
        }
      }
    }
  }
  > .commission-amount {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    .name {
      font-size: 30rpx;
      color: #333333;
    }
    .amount {
      font-size: 40rpx;
      font-weight: bold;
      color: #1b9b69;
    }
  }
}
.invited-user-type-selector {
  padding: 26rpx 0;
  display: flex;
  justify-content: space-around;
  .tab-name {
    font-size: 32rpx;
    color: #666666;
    font-weight: 400;
    position: relative;
    &.active {
      font-weight: 500;
      color: #333333;
    }
    &.active:after {
      content: "";
      position: absolute;
      bottom: -8rpx;
      left: 50%;
      width: 52rpx;
      transform: translate(-50%, 6rpx);
      height: 6rpx;
      background-color: #1b9b69;
      border-radius: 3rpx;
    }
  }
}
.invited-user-list {
  padding: 0 28rpx;
  .invited-user-item {
    padding: 50rpx 0;
    border-bottom: 2rpx solid #eeeeee;
    display: flex;
    justify-content: space-between;
    font-size: 30rpx;
    color: #333333;
  }
}
</style>
